@{
    ViewData["Title"] = "用户选择API文档";
    Layout = "_Layout";
}

<div class="container">
    <h1>用户选择API文档</h1>

<div class="card mb-4">
    <div class="card-header">
        <h2>1. 组织相关选择接口</h2>
    </div>
    <div class="card-body">
        <p class="alert alert-info">
            组织相关选择接口用于获取组织结构信息和组织内的用户列表。这些接口可以与UserSelectorDefaultHttp集成，用于工作流中的用户选择。
        </p>
            <h3>获取组织列表</h3>
            <pre><code>GET /api/user-select/organizations</code></pre>
            <p>控制器: UserSelectForOrganizationController.cs</p>
            <p>Action: GetSelections()</p>
            <p>说明: 获取系统中所有可用的组织列表，用于在工作流中选择特定组织的用户</p>
            <p>返回格式：</p>
            <pre><code>[
  {"Id":"","Name":""}
]</code></pre>
            <button class="btn btn-primary mb-2"
                onclick="callApi('GET', '/api/user-select/organizations',null,'selections')">调用API</button>
            <div class="response-container mb-4 p-3 bg-light border rounded" style="min-height: 100px;">
                <h5>响应结果：</h5>
                <pre class="response-result response-result-selections" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
            </div>

            <h3>根据组织ID获取用户列表</h3>
            <pre><code>POST /api/user-select/organizations/users</code></pre>
            <p>控制器: UserSelectForOrganizationController.cs</p>
            <p>Action: GetUsers()</p>
            <p>说明: 根据指定的组织ID获取该组织下的所有用户列表</p>
            <p>请求参数：</p>
            <pre><code>{
  "SelectionId": "组织ID"
}</code></pre>
            <div class="form-group mb-2">
                <label>组织ID:</label>
                <input type="text" class="form-control api-param" data-param="SelectionId" placeholder="输入组织ID">
            </div>
            <button class="btn btn-primary mb-2"
                onclick="callApi('POST', '/api/user-select/organizations/users', getParams(this),'users')">调用API</button>
            <div class="response-container mb-4 p-3 bg-light border rounded" style="min-height: 100px;">
                <h5>响应结果：</h5>
                <pre class="response-result response-result-users" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
            </div>
            <p>返回格式：</p>
            <pre><code>[
  {"Id":"","Name":""}
]</code></pre>
        </div>
    </div>

<div class="card mb-4">
    <div class="card-header">
        <h2>2. 角色相关选择接口</h2>
    </div>
    <div class="card-body">
        <p class="alert alert-info">
            角色相关选择接口用于获取系统角色信息和拥有特定角色的用户列表。这些接口对应于UserSelectorAllUsers实现，可以与UserSelectorDefaultHttp集成。
        </p>
            <h3>获取角色列表</h3>
            <pre><code>GET /api/user-select/roles</code></pre>
            <p>控制器: UserSelectForRoleController.cs</p>
            <p>Action: GetSelections()</p>
            <p>说明: 获取系统中所有可用的角色列表，如系统管理员、超级管理员、财务主管等</p>
            <p>返回格式：</p>
            <pre><code>[
  {"Id":"","Name":""}
]</code></pre>
            <button class="btn btn-primary mb-2" onclick="callApi('GET', '/api/user-select/roles',null,'selections')">调用API</button>
            <div class="response-container mb-4 p-3 bg-light border rounded" style="min-height: 100px;">
                <h5>响应结果：</h5>
                <pre class="response-result response-result-selections" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
            </div>

            <h3>根据角色ID获取用户列表</h3>
            <pre><code>POST /api/user-select/roles/users</code></pre>
            <p>控制器: UserSelectForRoleController.cs</p>
            <p>Action: GetUsers()</p>
            <p>说明: 根据指定的角色ID获取拥有该角色的所有用户列表</p>
            <p>请求参数：</p>
            <pre><code>{
  "SelectionId": "角色ID"
}</code></pre>
            <div class="form-group mb-2">
                <label>角色ID:</label>
                <input type="text" class="form-control api-param" data-param="SelectionId" placeholder="输入角色ID">
            </div>
            <button class="btn btn-primary mb-2"
                onclick="callApi('POST', '/api/user-select/roles/users', getParams(this),'users')">调用API</button>
            <div class="response-container mb-4 p-3 bg-light border rounded" style="min-height: 100px;">
                <h5>响应结果：</h5>
                <pre class="response-result response-result-users" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
            </div>
            <p>返回格式：</p>
            <pre><code>[
  {"Id":"","Name":""}
]</code></pre>
        </div>
    </div>

<div class="card mb-4">
    <div class="card-header">
        <h2>3. 用户相关选择接口</h2>
    </div>
    <div class="card-body">
        <p class="alert alert-info">
            用户相关选择接口用于获取系统用户列表和用户详情。这些接口对应于UserSelectorB实现，可以与UserSelectorDefaultHttp集成。
        </p>
            <h3>获取用户列表</h3>
            <pre><code>GET /api/user-select/users</code></pre>
            <p>控制器: UserSelectForUserController.cs</p>
            <p>Action: GetSelections()</p>
            <p>说明: 获取系统中所有可用的用户列表，用于直接选择特定用户</p>
            <p>返回格式：</p>
            <pre><code>[
  {"Id":"","Name":""}
]</code></pre>
            <button class="btn btn-primary mb-2" onclick="callApi('GET', '/api/user-select/users',null,'selections')">调用API</button>
            <div class="response-container mb-4 p-3 bg-light border rounded">
                <h5>响应结果：</h5>
                <pre class="response-result response-result-selections"></pre>
            </div>

            <h3>根据用户ID获取用户详情</h3>
            <pre><code>POST /api/user-select/user-detail</code></pre>
            <p>控制器: UserSelectForUserController.cs</p>
            <p>Action: GetUser()</p>
            <p>说明: 根据指定的用户ID获取该用户的详细信息</p>
            <p>请求参数：</p>
            <pre><code>{
  "SelectionId": "用户ID"
}</code></pre>
            <div class="form-group mb-2">
                <label>用户ID:</label>
                <input type="text" class="form-control api-param" data-param="SelectionId" placeholder="输入用户ID">
            </div>
            <button class="btn btn-primary mb-2"
                onclick="callApi('POST', '/api/user-select/user-detail', getParams(this),'users')">调用API</button>
            <div class="response-container mb-4 p-3 bg-light border rounded">
                <h5>响应结果：</h5>
                <pre class="response-result response-result-users"></pre>
            </div>
            <p>返回格式：</p>
            <pre><code>{
  "Id":"",
  "Name":""
}</code></pre>
        </div>

        @section Scripts {
            <script>
                function getParams(button) {
                    const container = button.closest('.card-body');
                    const inputs = container.querySelectorAll('.api-param');
                    const params = {};

                    inputs.forEach(input => {
                        params[input.dataset.param] = input.value;
                    });

                    return params;
                }

                function callApi(method, url, data,responseClass) {
                    const options = {
                        method: method,
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    };

                    if (method === 'POST' && data) {
                        options.body = JSON.stringify(data);
                    }

                    fetch(url, options)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(`HTTP error! status: ${response.status}`);
                            }
                            return response.json();
                        })
                        .then(data => {
                            const button = document.querySelector(`button[onclick*="${url}"]`);
                            const responseContainer = button.closest('.card-body');
                            const resultElement = responseContainer.querySelector('.response-result-'+responseClass);
                            resultElement.textContent = JSON.stringify(data, null, 2);
                        })
                        .catch(error => {
                            const button = document.querySelector(`button[onclick*="${url}"]`);
                            const responseContainer = button.closest('.card-body');
                            const resultElement = responseContainer.querySelector('.response-result-'+responseClass);
                            resultElement.textContent = `Error: ${error.message}`;
                        });
                }
            </script>
        }
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <h2>4. 与UserSelectorDefaultHttp集成</h2>
        </div>
        <div class="card-body">
            <p class="alert alert-info">
                UserSelectorDefaultHttp是一个通用的HTTP用户选择器，可以与上述API接口集成，用于工作流中的用户选择。
            </p>
            
            <h3>配置示例</h3>
            <h4>组织选择器配置</h4>
            <pre><code>selections=http://yourdomain/api/user-select/organizations
users=http://yourdomain/api/user-select/organizations/users</code></pre>

            <h4>角色选择器配置</h4>
            <pre><code>selections=http://yourdomain/api/user-select/roles
users=http://yourdomain/api/user-select/roles/users</code></pre>

            <h4>用户选择器配置</h4>
            <pre><code>selections=http://yourdomain/api/user-select/users
users=http://yourdomain/api/user-select/user-detail</code></pre>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>5. 用户选择器说明</h2>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>选择器名称</th>
                            <th>说明</th>
                            <th>对应API</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>按角色选择 (UserSelectorAllUsers)</td>
                            <td>根据系统角色选择用户，如系统管理员、财务主管等</td>
                            <td>/api/user-select/roles 和 /api/user-select/roles/users</td>
                        </tr>
                        <tr>
                            <td>按用户选择 (UserSelectorB)</td>
                            <td>从所有用户中直接选择特定用户</td>
                            <td>/api/user-select/users 和 /api/user-select/user-detail</td>
                        </tr>
                        <tr>
                            <td>自定义选择(HTTP) (UserSelectorDefaultHttp)</td>
                            <td>通过HTTP接口自定义用户选择逻辑，可与上述API集成</td>
                            <td>可配置使用任何符合格式要求的HTTP接口</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>SelectorInput参数说明</h3>
            <p>在调用获取用户的接口时，会传递以下参数：</p>
            <pre><code>{
  "SelectionId": "选项ID",
  "Expression": "表达式",
  "WorkTask": {
    // 当前流程实例信息
    "CreatedUserId": "流程创建人ID"
    // 其他流程相关信息
  },
  "CurrentStep": {
    // 当前审批步骤信息
  }
}</code></pre>
        </div>
    </div>
</div>
